<template>
  <el-container>
    <el-header>
      新增新闻
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="newsTypeValue" placeholder="请选择新闻类型">
            <el-option
              v-for="item in newsTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-input v-model="newsTitle" placeholder="请输入新闻标题"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input v-model="author" placeholder="请输入作者"></el-input>
        </el-col>
        <el-col :span="12">
          <el-input v-model="abstract" placeholder="请输入新闻摘要"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-button @click="addBtnConfirm()">添加新闻</el-button>
        </el-col>
      </el-row>
    </el-main>
</el-container>
</template>

<script>
import UE from 'base/ueditor/ueditor'
import axios from 'axios'
export default {
  data () {
    return {
      newsTypeOption: [{
        value: 1,
        label: '佰钧成新闻'
      }, {
        value: 2,
        label: '行业视点'
      }, {
        value: 3,
        label: '新闻速递'
      }],
      newsTypeValue: 1,
      newsTitle: '',
      defaultMsg: '',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 500
      },
      newsMain: '',
      author: '佰钧成',
      abstract: '',
      fileList: [],
      param: '',
      src: ''
    }
  },
  // mounted () {
  //   axios.get('/api/addNewsTitleImage').then(res => console.log(res))
  // },
  methods: {
    // beforeupload: function (file) {
    //   let windowURL = window.URL || window.webkitURL
    //   this.src = windowURL.createObjectURL(file)
    //   this.param = new FormData()
    //   this.param.append('file', file, file.name)
    //   return false
    // },
    addBtnConfirm: function () {
      this.newsMain = this.$refs.ue.getUEContent()
      if (this.newsTitle === '') {
        this.$message('标题不能为空!')
        return
      } else if (this.newsMain === '') {
        this.$message('正文不能为空!')
        return
      }
      this.$confirm('是否已完成该新闻编辑, 点击确定该新闻将被提交?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(this.addNewNews
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加新闻'
        })
      })
    },
    async addNewNews () {
      let res = await axios.get('/api/addNewNews', {
        params: {
          title: this.newsTitle,
          type: this.newsTypeValue,
          content: this.newsMain,
          abstract: this.abstract,
          author: this.author
        }
      })
      if (res.data.code === 0) {
        this.$message({
          type: 'success',
          message: '添加新闻成功!'
        })
        this.$refs.ue.setUEContent(this.defaultMsg)
        this.newsTitle = ''
        this.abstract = ''
      } else {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        })
      }
    },
    onSubmit: function () {
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('/api/addNewsTitleImage', this.param, config).then(result => console.log(result))
    }
  },
  components: {
    UE
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
</style>
